<template>
    <a-card title="用户标签管理" :bordered="false">
        <!-- Card Header -->


        <template slot="extra">
            <a-form layout="inline" @submit.prevent="searchSubmit">
                <a-form-item>
                    <a-input-number v-model.number="searchForm.tagId" placeholder="标签编号"
                    style="width: 150px"
                    ></a-input-number>
                </a-form-item>

                <a-form-item>
                    <a-input v-model="searchForm.tagName" placeholder="标签名称"></a-input>
                </a-form-item>


                <a-form-item>
                    <a-button icon="search" html-type="submit">搜索</a-button>
                </a-form-item>
                <a-form-item>
                    <a-popconfirm
                            title="确定要从公众平台上同步公众号的用户标签数据吗?"
                            @confirm="syncTag"
                    >
                        <a-button icon="download" type="primary">同步标签</a-button>
                    </a-popconfirm>

                </a-form-item>
                <a-form-item>
                    <a-button icon="plus" type="danger" @click="openEdit()">新建标签</a-button>
                </a-form-item>

            </a-form>
        </template>


        <a-table bordered :columns="columns" :rowKey="record => record.id" :dataSource="dataSource"
                 :pagination="pagination"
                 :loading="loading" @change="handleTableChange">


            <!-- 操作插槽 -->
            <template slot="operation" slot-scope="text, record">


                <a @click="openEdit(record)">编辑</a>
                <a-divider type="vertical"/>

                <a @click="deleteRecord(record)">删除</a>


            </template>
        </a-table>

        <EditBox v-if="editShow" :editRecord="editRecord" @closeFun="closeEdit"/>
    </a-card>
</template>
<script>

    import {pagination, tagTable} from '../public/colums';
    import {tagList, tagSync, tagDelete, userUpdate} from '../public/http';

    export default {


        components: {
            EditBox: () => import('./edit'),
        },

        data() {
            return {
                editShow: false, //打开编辑器
                editRecord: {}, //正在编辑的记录
                dataSource: [],
                selectedRowKeys: [], //选中的组件
                pagination: {
                    ...pagination
                }, //复制预设的分页参数
                loading: false, //表格loading
                columns: tagTable, //表头管理
                searchForm: {
                    tagId:null,
                    tagName: null,
                },


            };
        },
        methods: {

            //1.0 获取表格数据
            getTableList() {
                this.loading = true;
                let searchData = this.$exMod.filterObjEmpty(this.searchForm); //删除对象中的空值
                tagList(this.pagination, searchData).then(res => {
                    this.loading = false;
                    if (res.code === 0) {
                        this.dataSource = res.data.result; //表格数据
                        this.pagination.total = res.data.total; //总记录条数
                    }
                });
            },
            //1.2翻页监听
            handleTableChange(pagination) {
                this.pagination.current = pagination.current;
                this.pagination.pageSize = pagination.pageSize;
                this.getTableList();
            },
            //2.0打开编辑器
            openEdit(obj = {}) {
                this.editRecord = obj;
                this.editShow = true;
            },

            //2.1 关闭编辑器
            closeEdit(e) {

                this.editShow = false;
                if (e.render) {
                    this.getTableList();
                }
            },

            //2.2 同步标签
            syncTag() {
                this.loading = true;
                tagSync().then(res => {
                    this.$exMod.ajaxMessage(res);
                    this.getTableList();
                })
                this.loading = false;

            },


            //3.0 搜索提交
            searchSubmit() {
                this.pagination.current = 1;
                this.getTableList();
            },
            //4.0删除订阅用户

            deleteRecord(record) {
                let _this = this;
                this.$confirm({
                    title: '确定要删除' + record.tagName + '这个标签吗？',
                    onOk() {
                        tagDelete(record.id).then(res => {
                            _this.$exMod.ajaxMessage(res);
                            if (res.code === 0) {
                                _this.getTableList();
                            }
                        });
                    },

                });


            },
            //数据初始化
            async init() {

                this.getTableList();
            }

        },
        created() {
            this.init();
        }
    };
</script>

